<template>
  <div class="login">
    <!-- <div class="header clearfix">
      <x-icon @click="routerBack" class="back-icon" type="ios-arrow-left" size="36"></x-icon>
      <router-link :to="{ path: '/register' }" class="header-link">注册</router-link>
    </div> -->
    <div class="panel-middle">
      <div class="tips">
        <h2>账号密码登录</h2>
      </div>
      <group gutter="0" class="input-group">
        <x-input class="input"  ref="input01" :max="13" is-type="china-mobile" required placeholder="请输入手机号" @on-blur="onBlur1" v-model="phone">
        </x-input>
        <x-input class="input" ref="input02" type="password" :min="6" :max="20" required placeholder="请输入密码" @on-blur="onBlur2" v-model="password">
        </x-input>
        <x-input class="input code" ref="input03" type="text" required placeholder="请输入验证码" v-model="code">
          <span @click="randomAction" slot="right" class="code-img"><img :src="codeImgUrl"></img></span>
        </x-input>

      </group>
      <div class="submit-btn">
        <x-button @click.native="login" style="border-radius: 30px;" :gradients="['#FF2719', '#FF61AD']">登录</x-button>
      </div> 
      <div class="link-flex">
        <router-link :to="{ path: '/register' }">没有账号？<span>立即注册</span></router-link> |
        <router-link :to="{ path: '/forgotpassword' }">忘记密码？</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { XInput, Group, Cell, XButton } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import { setStore, getStore } from '@/utils/mUtils'
import http from '@/utils/http'
export default {
	components: {
    XInput,
    Group,
    Cell,
    XButton
	},
  data () {
    return {
      phone: null,
      code: null,
      password: null,
      isPhone: false,
      isPassword: false,
      randomNumber: null
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    codeImgUrl () {
      return '/api/v1/code?c=' + this.randomNumber
    }
  },
  methods: {
    ...mapActions(['saveUserInfo', 'getCartLen']),
    randomAction () {
      this.randomNumber = Math.random() + ''
    },
  	routerBack () {
  		this.$router.go(-1)
  	},
    onBlur1 (value,$event) {
      this.isPhone = this.$refs.input01.valid
    },
    onBlur2 (value,$event) {
      this.isPassword = this.$refs.input02.valid
    },
    toastFn (text) {
      this.$vux.toast.show({
        text,
        type,
        width: 'auto',
        position: 'middle'
      })
    },
    // 登录
    login () {
      let that = this
      let params = {
        phone: this.phone, // 提交的手机号
        password: this.password,
        code: this.code
      }
      if (!this.phone) {
        that.toastFn('请输入手机号!', 'warn')
        return;
      }else if (!this.password) {
        that.toastFn('请输入你的密码!', 'warn')
        return;
      }else if (!this.isPhone) {
        that.toastFn('手机号格式有误!', 'warn')
        return;
      }else if (!this.isPassword) {
        that.toastFn('密码不得小于六位!', 'warn')
        return;
      }else if (!this.code) {
        that.toastFn('请输入验证码!', 'warn')
        return;
      }
      http.post('/api/v1/login', params, false, res => {
        if (res.status == 1) {
          global.token = res.token
          setStore('token', res.token)
          // 保存到vux
          that.getUserInfo()
          that.getCartLen()
          if(that.$route.query.redirect){
            let redirect = that.$route.query.redirect;
            that.$router.push(redirect);
          }else{
            that.$router.go(-1);
          }
        }else {
          that.$Indicator.close();
          that.toastFn(res.msg, 'warn')
        }
      })
    },
    getUserInfo () {
      http.get('/api/v1/getUserInfo', {}, false, res => {
        if (res.status == 1) {
          this.$store.dispatch('saveUserInfo', res.userInfo)
          console.log(this.userInfo)
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  position: relative;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25% 15px 0 15px;
}
.panel-middle {
  width: 100%;
}
.tips {
  padding: 0 15px;
  text-align: center;
  padding-bottom: 15px;
}
.tips h2 {
  font-size: 30px;
}
.input {
  color: #666;
  padding: 15px;
}
.input-group {
  border-radius: 3px;
  overflow: hidden;
}
.input-group:after,
.input:before {
  left: 15px !important;
  right: 15px !important;
}
.submit-btn {
  margin: 5px 0 0 0;
  padding: 15px;
}
.link-flex {
  text-align: center;
  color: #333;
  color: #787878;
  font-size: 12px;
}
.link-flex a {
  color: #787878;
  padding: 0 5px;
}
.link-flex a span {
  color: #fd4257;
}
.code {
  padding: 7px 15px;
}
.code-img {
  display: block;
  width: 100px;
  height: 36px;
}
</style>
